<template>
  <div class="like_div">
    <el-row :gutter="30">
      <el-col :span="2" class="all_center">
        <div class="point" :class="{forbidden:!loginStatus,allow:loginStatus}">
          <div v-if="this.like==='false'">
            <el-image :src="require('../../assets/未点赞图标.png')" @click="setLikeTrueStatus();sendLikeStatus()"></el-image>
          </div>
          <div v-else-if="this.like==='true'">
            <el-image :src="require('../../assets/已点赞图标.png')" @click="setLikeFalseStatus();sendLikeStatus()"></el-image>
          </div>
        </div>
        <div class="number_font">
          {{ this.allLikeNumber }}
        </div>
      </el-col>
      <el-col :span="2" class="all_center">
        <div class="point" :class="{forbidden:!loginStatus,allow:loginStatus}">
          <div v-if="this.collected==='false'">
            <el-image :src="require('../../assets/未收藏图标.png')" @click="setCollectTrueStatus();sendCollectStatus()"></el-image>
          </div>
          <div v-else-if="this.collected==='true'">
            <el-image :src="require('../../assets/已收藏图标.png')" @click="setCollectFalseStatus();sendCollectStatus()"></el-image>
          </div>
        </div>
        <div class="number_font">
          {{ this.collectNumber }}
        </div>
      </el-col>
      <el-col :span="2" class="all_center">
        <div class="point">
          <el-image :src="require('../../assets/分享按钮.png')"></el-image>
        </div>
        <div class="number_font">
          {{ this.forwardNumber }}
        </div>
      </el-col>
      <el-col :span="2" class="all_center">
        <div class="point">
          <el-image :src="require('../../assets/dislike.png')"></el-image>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props:['id','username'],
  data() {
    return {
      like:'false',
      collected:'false',
      loginStatus:false,
      allLikeNumber:'',
      collectNumber:'',
      forwardNumber:'',
    }
  },
  watch: {
    id(newValue) {
      if (newValue){
        this.getAllLikeNumber()
        this.getLikeStatus()
        this.getCollectStatus()
        this.getAllCollectNumber()
      }
    },
  },
  methods:{
    // 获取当前用户对当前视频的点赞状态
    getLikeStatus() {
      if (this.username) {
        this.loginStatus=true
        this.$axios.get('api/video/like/status/',{
          params:{username:this.username,video_id:this.id}
        }).then((response)=>{
          const res = response.data
          if (res['respCode'] === '000000') {
            this.like = res['like_status']
          }else {
            console.log(res['respMsg'])
          }
        })
      }else {
        this.like='false'
        this.loginStatus=false
        console.log(this.loginStatus)
      }
    },
    // 获取当前视频点赞数
    getAllLikeNumber() {
      this.$axios.get('api/video/like/number',{
        params:{video_id:this.id}
      }).then((response)=>{
        const res = response.data
        if (res['respCode'] === '000000') {
          if (res['like_number'] === null) {
            this.allLikeNumber = 0
          }else {
            this.allLikeNumber = res['like_number']
          }
        }else {
          console.log(res['respMsg'])
        }
      })
    },
    // 向后端传递点赞状态
    sendLikeStatus() {
      if (this.username) {
        this.$axios.get('api/video/like/',{
          params:{video_id:this.id, username:this.username,status:this.like}
        }).then((response)=>{
          const res = response.data
          if (res['respCode'] === '000000') {
            this.getAllLikeNumber()
          }else {
            console.log(res['respMsg'])
          }
        })
      }else {
        this.$message.info('请先登录哦')
      }
    },
    // 获取当前用户对当前视频的收藏状态
    getCollectStatus() {
      if (this.username) {
        this.loginStatus=true
        this.$axios.get('api/video/collect/status/',{
          params:{username:this.username,video_id:this.id}
        }).then((response)=>{
          const res = response.data
          if (res['respCode'] === '000000') {
            this.collected = res['collect_status']
          }else {
            console.log(res['respMsg'])
          }
        })
      }else {
        this.collected='false'
        this.loginStatus=false
      }
    },
    // 获取当前视频收藏数
    getAllCollectNumber() {
      this.$axios.get('api/video/collect/number',{
        params:{video_id:this.id}
      }).then((response)=>{
        const res = response.data
        if (res['respCode'] === '000000') {
          if (res['collect_number'] === null) {
            this.collectNumber = 0
          }else {
            this.collectNumber = res['collect_number']
          }
        }else {
          console.log(res['respMsg'])
        }
      })
    },
    // 向后端传递收藏状态
    sendCollectStatus() {
      if (this.username) {
        this.$axios.get('api/video/collect/',{
          params:{video_id:this.id, username:this.username,status:this.collected}
        }).then((response)=>{
          const res = response.data
          if (res['respCode'] === '000000') {
            this.getAllCollectNumber()
          }else {
            console.log(res['respMsg'])
          }
        })
      }else {
        this.$message.info('请先登录哦')
      }
    },
    setLikeTrueStatus() {
      this.like='true'
    },
    setLikeFalseStatus() {
      this.like='false'
    },
    setCollectTrueStatus() {
      this.collected='true'
    },
    setCollectFalseStatus() {
      this.collected='false'
    },
  },
}
</script>

<style scoped>
.point {
  &.allow{
    cursor: pointer;
  }
  &.forbidden{
    cursor: not-allowed;
  }
}
.like_div{
  margin-top: 30px;
}
.all_center {
  text-align: center;
}
.number_font {
  font-size: 12px;
  color: #999999;
}
</style>
